<template>
	<view id="detail">
		<view class="detail-item">
			<u-cell-group>
				<!-- <u-cell title="告警详情"></u-cell> -->
				<u-cell size="large" :title="detail.alertTitle"></u-cell>
				<u-cell size="large" v-for="item in projectType" :key="item.id" v-if="detail.project.project_type == item.id" :value="item.title" label="项目类型"></u-cell>
				<u-cell size="large" v-for="item in alertType" :key="item.id" v-if="detail.alertType == item.id" :value="item.title" label="告警类型"></u-cell>
				<u-cell size="large" v-for="item in handleType" :key="item.id" v-if="detail.flag == item.id" label="告警处理结果">
					<view slot="value" :class="item.id == 1 ? 'processing-results' : 'processing-results-not'">{{item.title}}</view>
				</u-cell>
				<u-cell v-if="detail.alertType == 1 || detail.alertType == 2 || detail.alertType == 3" size="large" :value="detail.businessValue" label="监测值"></u-cell>
				<u-cell v-if="detail.alertType == 1 || detail.alertType == 2 || detail.alertType == 3" size="large" label="允许值">
					<template slot="value">
						<view v-if="detail.alertType == 1 || detail.alertType == 2">
							<text v-if="detail.alertType == 1">250</text>
							<text v-if="detail.alertType == 2">115</text>
						</view>
						<view v-else>
							<text v-if="detail.businessInfo.time_type == 0">70</text>
							<text v-else>55</text>
						</view>
					</template>
				</u-cell>
				<u-cell size="large" v-if="detail.alertType == 1 || detail.alertType == 2" :value="detail.businessInfo.closer_station_pm10" label="国控PM10"></u-cell>
				<u-cell size="large" v-if="detail.alertType == 1 || detail.alertType == 2" :value="detail.businessInfo.closer_station_pm25" label="国控PM2.5"></u-cell>
				<u-cell size="large" v-if="detail.alertType == 0" :value="detail.businessInfo.wash_result" label="车冲结果">
					<template slot="value">
						<u-tag v-if="detail.businessInfo.wash_result == 0" text="已清洗" type="success" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.wash_result == 1" text="未清洗" type="error" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.wash_result == 2" text="未识别" type="warning" size="mini"></u-tag>
					</template>
				</u-cell>
				<u-cell size="large" v-if="detail.alertType == 0" label="绕行结果">
					<template slot="value">
						<u-tag v-if="detail.businessInfo.detour_result == 0" text="未绕行" type="success" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.detour_result == 1" text="已绕行" type="error" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.detour_result == 2" text="未识别" type="warning" size="mini"></u-tag>
					</template>
				</u-cell>
				<u-cell size="large" v-if="detail.alertType == 0" :value="detail.businessInfo.cover_result" label="覆盖结果">
					<template slot="value">
						<u-tag v-if="detail.businessInfo.cover_result == 0" text="已覆盖" type="success" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.cover_result == 1" text="未覆盖" type="error" size="mini"></u-tag>
						<u-tag v-if="detail.businessInfo.cover_result == 2" text="未识别" type="warning" size="mini"></u-tag>
					</template>
				</u-cell>
				<u-cell size="large" v-if="detail.alertType == 5" :value="detail.businessInfo.businessValue" label="覆盖率"></u-cell>
				<u-cell size="large" :value="detail.project.project_no" label="项目编号"></u-cell>
			</u-cell-group>
		</view>
		<view class="detail-item">
			<u-cell-group>
				<u-cell title="通知详情"></u-cell>
				<u-cell size="large" :value="detail.createTime" label="通知时间"></u-cell>
				<u-cell size="large" value="小程序" label="通知类型"></u-cell>
				<u-cell size="large" :value="detail.project.constructor_name" label="通知单位"></u-cell>
				<u-cell size="large" :value="detail.project.constructor_contacts" label="接收人"></u-cell>
				<u-cell size="large" label="联系电话">
					<view slot="value" class="openPhone">
						<text class="u-slot-value">{{detail.project.constructor_tel}}</text>
						<!-- <u-button type="success" :plain="true" size="mini"> -->
							<u-icon size="26" name="phone-fill" color="#26de81" @click="openPhone(detail.project.constructor_tel)"></u-icon>
						<!-- </u-button> -->
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="submit-btn" v-if="detail.flag != '1'">
			<text class="btn-add" @click="toAdd">处理</text>
		</view>
	</view>
</template>

<script>
	import { getWarnDetail, updateFlag } from '@/api/warn'
	import config from '@/utils/defaultConfig'
	
	export default {
		data() {
			return {
				alertType: config.alertType,
				projectType: config.projectType,
				handleType: config.handleType,
				warnId: '',
				detail: {}
			}
		},
		onLoad (option) {
			this.warnId = option.id
		},
		onShow () {
			this.getDetail()
		},
		methods: {
			getDetail () {
				uni.showLoading({
					title: '告警详情加载中',
					mask: true
				})
				getWarnDetail(this.warnId).then(res => {
					this.detail = res.data.data
					uni.setNavigationBarTitle({
						title: this.detail.projectName
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			openPhone(phone) {
				// 获取设备平台
				// let platform = uni.getSystemInfoSync().platform
				// switch (platform) {
				// 	case 'android':
				// 		uni.showActionSheet({
				// 			itemList: [phone,'呼叫'],
				// 			success:function(res){
				// 				console.log(res,'res');
				// 				if(res.tapIndex==1){
				// 					plus.device.dial(phone,true)        
				// 				}
				// 			},
				// 			complete: function(res) {
				// 			   console.log("安卓失败",res)
				// 			}
				// 		})
				// 		break;
				// 	case 'ios':
				// 		// 使用uni-app提供的借口
				// 		uni.makePhoneCall({
				// 			phoneNumber: phone.toString(),
				// 			success: ()=>{console.log('success')},
				// 			fail: ()=>{console.log('fail')},
				// 			complete:()=>{console.log('complete')}
				// 		})
				// 		break;
				// 	default:
				// }
				uni.makePhoneCall({
					phoneNumber: phone.toString()
				})
			},
			toAdd () {
				uni.showModal({
					title: "提示",
					content: "是否处理",
					showCancel: false,
					success: config => {
						if (config.confirm) {
							updateFlag(this.warnId).then(res => {
								this.getDetail()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#detail {
		.detail-item {
			padding-bottom: 100upx;
			.openPhone {
				display: flex;
				text {
					padding-right: 14upx;
				}
			}
		}
		.processing-results, .processing-results-not {
			display: block;
			padding: 0 16upx;
			height: 40upx;
			line-height: 40upx;
		}
		.processing-results {
			background-color: rgba(65,136,240,.2);
			color: $uni-color-primary;
		}
		.processing-results-not {
			background-color: rgba(255, 101, 74, 0.2);
			color: #ff654a;
		}
		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: #ffffff;
			height: 100upx;
			.btn-add {
				display: block;
				width: 40%;
				height: 72upx;
				line-height: 72upx;
				background-color: #55aaff;
				margin: 18upx auto;
				border-radius: 40upx;
				text-align: center;
				font-size: 32upx;
				color: #fff;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			}
		}
	}
</style>
